<div class="table-operations">
  <button nz-button nzType="primary" (click)="addRole()">添加角色</button>
</div>
<nz-table #basicTable nzBordered [nzData]="dataSet">
  <thead>
    <tr>
      <th *ngFor="let item of headers">{{item}}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of basicTable.data">
      <td>{{item.name}}</td>
      <td>{{item.code}}</td>
      <td>{{item._id}}</td>
      <td>
        <a (click)="delRole(item)">删除</a>
      </td>
    </tr>
  </tbody>
</nz-table>

<nz-modal [(nzVisible)]="modalVisible" nzTitle="添加角色" (nzOnCancel)="modalCancel()" (nzOnOk)="modalOk()">
  <form nz-form [formGroup]="roleForm" (ngSubmit)="submitForm()">
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="name">名字</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <input nz-input formControlName="name" id="name">
        <nz-form-explain *ngIf="roleForm.get('name').dirty && roleForm.get('name').errors">角色名字必填!</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="code">代码</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <input nz-input formControlName="code" id="code">
        <nz-form-explain *ngIf="roleForm.get('code').dirty && roleForm.get('code').errors">角色代码必填!</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
  </form>
</nz-modal>
